<template>
    <div>
        <Modal v-model="data.isShow" :mask-closable="false">
            <p slot="header">
                <span>{{data.actionType == 1? '添加': '修改'}}全限</span>
            </p>
            <div style="margin-top: 10px; padding-right: 20px;" >
                <Form ref="form" :model="data.data" :label-width="100" :rules="ruleValidate">
                    <FormItem label="人员姓名" prop="name">
                        <Input v-model="data.data.name"  placeholder="请输入人员姓名"></Input>						
					</FormItem>
                    <FormItem label="权限" prop="quan">
                        <Select v-model="data.data.quan" multiple>
                            <Option v-for="item in deviceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="管理模块" prop="guan">
                        <Select v-model="data.data.guan" multiple>
                            <Option v-for="item in deviceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="账号" prop="num">
                        <Input v-model="data.data.num"  placeholder="请输入账号"></Input>						
					</FormItem>
                    <FormItem label="密码" prop="pwd">
                        <Input type="password" v-model="data.data.pwd"  placeholder="请输入密码"></Input>						
					</FormItem>
                </Form>
            </div>
            <div slot="footer">
				<Button 
					type="primary" 
					@click="handleSubmit">
					确认
				</Button>
			</div>
        </Modal> 
    </div>
</template>

<script>
export default {
    props: ['data'],
    data () {
        return {
            areaData:[],
            deviceList: [
                    {
                        value: '1',
                        label: '超级管理员'
                    },
                    {
                        value: '2',
                        label: '管理员'
                    }
            ],
            ruleValidate: {
                name: [
                    { required: true, message: '请输入人员姓名!', trigger: 'blur' },                    
                ],
                quan: [
                    { required: true, message: '请选择权限!', trigger: 'blur' },                    
                ],
                guan: [
                    { required: true, message: '请选择管理模块', trigger: 'blur' },                    
                ],
                num: [
                    { required: true, message: '请输入账号', trigger: 'blur' },                    
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },                    
                ],

            }
        };
    },
    methods: {
        handleSubmit(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$emit('on-submit', this.data);
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        }
    },
};
</script>

<style lang="less" scoped>

</style>
